<template>
	<view class="explain flex--col">
	  <view class="explain-heading flex--row">
		  <view class="explain-summary text--secondary-dark">
			  <text>留下的记录数</text>
			  <view class="explain-summary-total text--main-dark">
			  	{{total}}
				<text class="text--secondary-dark">张</text>
			  </view>
		  </view>
		  <view class="explain-button text--secondary-dark" @click="uploadImage" role="button">
		  	拍摄照片
		  </view>
	  </view>
	  <EmptyWarn v-if="records.length === 0">没有拍照记录</EmptyWarn>
	  <view class="explain-records flex--col" v-else>
		  <RecordItem v-for="record in records" :key="record.recordId" :record="record"></RecordItem>
	  </view>
	</view>
</template>

<script>
	import * as RecordApi from "@/api/record/record.js"
	import * as CommonApi from "@/api/common/common.js"
	import {REFRESH_RECORDS} from "@/core/constant/event.js"
	import RecordItem from "./components/RecordItem.vue"
	import EmptyWarn from "@/components/EmptyWarn/EmptyWarn.vue"
	
	export default {
		data() {
			return {
				info:'',
				path:'',
				records:[],
				total:0,
			}
		},
		components:{
			RecordItem,
			EmptyWarn
		},
		methods: {
			async getImageDesc(){
				 const params = {
					 path:this.path
				 }
				 const {info} =  await CommonApi.imageExplain(params)
				 this.info =info
			},
			async getRecordList(){
				const data = await RecordApi.recordList()
				this.records = data.recordList
				this.total = data.total
			},
			uploadImage(){
				const app = this
				uni.chooseImage({
				  count: 1,
				  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				  success(res) {
					  const tempFile = res.tempFiles[0]	
					  CommonApi.upload([tempFile])
					    .then(file => {
							const path = file.url
							app.$navTo("pages/explainDetails/explainDetails",{path})
					    })
					    .catch((err) => {
							console.log(err)
					})
				  }
				});
			}
		},
		async onLoad(){
			await this.getRecordList()
			uni.$on(REFRESH_RECORDS,this.getRecordList)
		}
	}
</script>

<style lang="scss">
	page{
		width:100%;
		background:#fff;
		height:100%;
	}
	
	.text--main-dark{
		font-size: 24px;
		font-weight: 700;
		color:#333;
	}
	
	.text--secondary-dark{
		font-size: 16px;
		font-weight: 600;
		color:#333;
	}
	
	.text--thirdary-dark{
		font-size: 14px;
		font-weight: 400;
		color:#333;
	}
	
	.explain{
		width:600rpx;
		height:100vh;
		overflow: scroll;
		margin:auto;
		padding:10% 0%;
		gap:24px;
		box-sizing: border-box;
		
		position:relative;
	}
	
	.explain-heading{
		justify-content: space-between;
		.explain-button{
			@include border-four-roundings;
			padding:12px;
			box-shadow: 2px 2px 0px $main-color--light;
		}
	}
	
	.explain-records{
		gap:24px;
	}


</style>
